<template>
  <el-form :model="searchForm" :rules="rules" ref="searchFormRef" :size="formSize" inline>
    <slot></slot>
    <slot name="footer">
      <el-form-item style="margin-right: 0">
        <el-button type="primary" icon="Search" :size="buttonSize" @click="emit('search')">搜索</el-button>
        <el-button icon="Refresh" :size="buttonSize" @click="reset">重置</el-button>
      </el-form-item>
    </slot>
  </el-form>
</template>

<script setup name="ListSearch">
  const props = defineProps({
    rules: {
      type: Object,
      default: () => ({})
    },
    resetRefresh: {
      //重置时是否刷新列表
      type: Boolean,
      default: true
    },
    formSize: {
      type: String,
      default: ''
    },
    buttonSize: {
      type: String,
      default: ''
    }
  })
  const searchForm = defineModel({ default: {} })
  const emit = defineEmits(['search', 'reset'])
  const searchFormRef = useTemplateRef('searchFormRef')

  function reset() {
    searchFormRef.value.resetFields()
    emit('reset')
    if (props.resetRefresh) emit('search')
  }
</script>
